<template>
  <div class="form-item focus-within:text-black focus-within:b-gray-600">
    <slot name="header"></slot>
    <div class="flex flex-col gap-1">
      <div class="">{{ props.label }}</div>
      <div v-if="props.tips" class="form-item-inline">
        <div class="icon-xs i-mdi-information-variant-circle text-gray-400"></div>
        <div class="desc-xs">{{ props.tips }}</div>
      </div>
      <div class="" :class="`${props.showBox ? 'input-box' : ''} ${props.ruleMessage.length ? 'b-red-500' : ''}`">
        <slot></slot>
      </div>
      <div class="text-red-500 text-xs">{{ ruleMessage }}</div>
    </div>
    <slot name="footer"></slot>
    <!-- <div class="mt-3 divider-x" :class="ruleMessage.length ? 'bg-red-500' : ''"></div> -->
  </div>
</template>

<script setup lang='ts'>

interface IProps {
  label?: string
  tips?: string
  showBox?: boolean,
  ruleMessage?: string,
}

const props = withDefaults(defineProps<IProps>(), {
  label: '',
  tips: '',
  showBox: true,
  ruleMessage: '',
})

</script>

<style></style>